import 'package:api/pages/apps/changeDayAndLight/provide_config.dart';
import 'package:api/pages/apps/changeDayAndLight/theme_config.dart';
import 'package:flutter/material.dart';
import 'package:flutter_guidance_plugin/flutter_guidance_plugin.dart';

class CustomScrollDemoPage extends StatefulWidget {
  @override
  _CustomScrollDemoPageState createState() => _CustomScrollDemoPageState();
}

class _CustomScrollDemoPageState extends State<CustomScrollDemoPage>
    with SingleTickerProviderStateMixin {
  String imageUrl =
      "https://th.bing.com/th/id/R935b2ee9dfe078d4dfa13db56afdaf72?rik=ABQSRAhWyHKBOQ&riu=http%3a%2f%2fup.deskcity.org%2fpic_source%2f93%2f5b%2f2e%2f935b2ee9dfe078d4dfa13db56afdaf72.jpg&ehk=Yu2ez7Xfa31mbUPerz6FyuXoYIYwlZn9EFfNDEi4DGI%3d&risl=&pid=ImgRaw";
  String itemImageUrl =
      "https://th.bing.com/th/id/R7aac4b3b9a3e8ebcb7699bce5f867fad?rik=sRStPpFvWoluAA&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160319%2f3-16031Z95921.jpg&ehk=9CVNHMRIN%2bOqHv%2frCAO%2ftU0Rmk8p6m3Zt2siYsoPLoY%3d&risl=&pid=ImgRaw";

  GlobalKeyPoint globalkeyPointKey1 =
      GlobalKeyPoint(GlobalKey(), tipsMessage: "正常模式", isShowReact: true);
  GlobalKeyPoint globalkeyPointKey2 =
      GlobalKeyPoint(GlobalKey(), tipsMessage: "哀悼模式", isShowReact: true);
  GlobalKeyPoint globalkeyPointKey3 =
      GlobalKeyPoint(GlobalKey(), tipsMessage: "切换白天黑夜", isShowReact: true);

  @override
  void initState() {
    // TODO: implement initState 这个页面不能使用context
    super.initState();
    List<GlobalKeyPoint> globalKeyPintList = [];
    globalKeyPintList.add(globalkeyPointKey1);
    globalKeyPintList.add(globalkeyPointKey2);
    globalKeyPintList.add(globalkeyPointKey3);
    WidgetsBinding.instance.addPostFrameCallback((duration) {
      showBeginnerGuidance(context,
          globalKeyPointList: globalKeyPintList, logs: true, isSlide: true);
    });
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies 这个页面才能使用context
    super.didChangeDependencies();
  }

  Color currentColor = Colors.transparent;
  int selectedColor = 0;

  @override
  Widget build(BuildContext context) {
    return ColorFiltered(
      colorFilter: ColorFilter.mode(currentColor, BlendMode.color),
      child: Scaffold(
        body: Stack(
          children: [
            buildCustomScrollWidget(),
            buildFloatMenuWidget(),
          ],
        ),
      ),
    );
  }

  buildCustomScrollWidget() {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          backgroundColor: Theme.of(context).primaryColor,
          pinned: true,
          snap: false,
          floating: true,
          leading: Icon(Icons.home),
          title: Text("GGB"),
          expandedHeight: 180,
          flexibleSpace: FlexibleSpaceBar(
            background: Row(children: [
              Expanded(
                child: Image.network(imageUrl, fit: BoxFit.fill),
              ),
            ]),
          ),
        ),
        SliverList(
          delegate:
              SliverChildBuilderDelegate((BuildContext context, num index) {
            return Container(
              height: 240,
              color: Colors.black,
              margin: EdgeInsets.only(bottom: 40),
              child: Container(
                color: Colors.white,
                child: Column(children: [
                  SizedBox(
                    height: 10,
                  ),
                  Text("你愁啥，瞅你咋地！"),
                  SizedBox(
                    height: 10,
                  ),
                  Expanded(
                    child: Image.network(itemImageUrl),
                  ),
                ]),
              ),
            );
          }, childCount: 100),
        )
      ],
    );
  }

  buildFloatMenuWidget() {
    return Align(
      alignment: Alignment.centerRight,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(4),
        ),
        margin: EdgeInsets.only(right: 20),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              FlatButton(
                key: globalkeyPointKey1.key,
                onPressed: () {
                  setState(() {
                    currentColor = Colors.transparent;
                  });
                },
                child: Text("正常"),
              ),
              FlatButton(
                key: globalkeyPointKey2.key,
                onPressed: () {
                  setState(() {
                    currentColor = Colors.grey;
                  });
                },
                child: Text("灰色"),
              ),
              FlatButton(
                key: globalkeyPointKey3.key,
                onPressed: () {
                  setState(() {
                    selectedColor = selectedColor == 0 ? 1 : 0;
                  });
                  ProvideConfig.value<ThemeConfigModel>(context)
                      .setTheme(selectedColor);
                },
                child: Text(selectedColor == 0 ? "黑夜模式" : "白天模式"),
              ),
            ]),
      ),
    );
  }
}
